@tooltip-prefix-cls: ~"@{sta-prefix}-tooltip";

.@{tooltip-prefix-cls} {
    .tooltip;

    &-popper {
        .tooltip-popper;

        &-show {
            opacity: 1;
        }
    }

    &-arrow {
        .tooltip-arrow;
    }

    &-title {
        .tooltip-title;
    }

    &-drop {
        padding: 7px 0;
        position: absolute;
        z-index: @zindex-tooltip;
        display: block;

        &-hide {
            min-width: 110px;
            opacity: 0;
            transform: scaleY(0);
            transition: all .2s;
            transform-origin: center top;
        }

        &-anima {
            opacity: 1;
            transform: scaleY(1);
        }

        &[x-placement="top-start"] .@{tooltip-prefix-cls}-arrow {
            left: 16px;
            top: inherit;
            bottom: 3px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .07);
            border-color: transparent #ffffff #ffffff transparent;
        }

        &[x-placement="top"] .@{tooltip-prefix-cls}-arrow {
            top: inherit;
            bottom: 3px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .07);
            border-color: transparent #ffffff #ffffff transparent;
        }

        &[x-placement="top-end"] .@{tooltip-prefix-cls}-arrow {
            top: inherit;
            bottom: 3px;
            right: 16px;
            left: inherit;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .07);
            border-color: transparent #ffffff #ffffff transparent;
        }

        &[x-placement="left-start"],
        &[x-placement="left"],
        &[x-placement="left-end"],
        &[x-placement="right-start"],
        &[x-placement="right"],
        &[x-placement="right-end"] {
            padding: 0 8px;
        }

        &[x-placement="left-start"] .@{tooltip-prefix-cls}-arrow {
            top: 8px;
            right: 0;
            left: inherit;
            box-shadow: 2px -2px 2px rgba(0, 0, 0, .07);
            border-color: #ffffff #ffffff transparent transparent;
        }

        &[x-placement="left"] .@{tooltip-prefix-cls}-arrow {
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            right: 0;
            left: inherit;
            box-shadow: 2px -2px 2px rgba(0, 0, 0, .07);
            border-color: #ffffff #ffffff transparent transparent;
        }

        &[x-placement="left-end"] .@{tooltip-prefix-cls}-arrow {
            top: inherit;
            right: 0;
            bottom: 8px;
            left: inherit;
            box-shadow: 2px -2px 2px rgba(0, 0, 0, .07);
            border-color: #ffffff #ffffff transparent transparent;
        }

        &[x-placement="right-start"] .@{tooltip-prefix-cls}-arrow {
            top: 8px;
            left: 8px;
            box-shadow: -2px 2px 2px rgba(0, 0, 0, .07);
            border-color: transparent transparent #ffffff #ffffff;
        }

        &[x-placement="right"] .@{tooltip-prefix-cls}-arrow {
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            left: 8px;
            box-shadow: -2px 2px 2px rgba(0, 0, 0, .07);
            border-color: transparent transparent #ffffff #ffffff;
        }

        &[x-placement="right-end"] .@{tooltip-prefix-cls}-arrow {
            top: inherit;
            right: 0;
            bottom: 8px;
            left: 8px;
            box-shadow: -2px 2px 2px rgba(0, 0, 0, .07);
            border-color: transparent transparent #ffffff #ffffff;
        }

        &[x-placement="bottom-start"] .@{tooltip-prefix-cls}-arrow {
            left: 16px;
        }

        &[x-placement="bottom-end"] .@{tooltip-prefix-cls}-arrow {
            left: inherit;
            right: 16px;
        }
    }


}